<template>
    <div>
        <div class="alert">
            <el-alert title="无效会员指个人会员注册后未创建简历、企业会员未完善企业资料的会员信息" type="warning" :closable="false"/>
        </div>
        <el-card style="margin: 20px;">
            <template #header>
                <div class="card-header">
                    <span>会员列表</span>
                    <hr />
                </div>
            </template>
            <div class="search">
                <el-select v-model="search.value1">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="sort">
                    <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="search.value3">
                    <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="search.value4">
                    <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="search.value5">
                    <el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="search.value6">
                    <el-option v-for="item in options6" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <div class="input" style="width: 350px">
                    <el-input v-model="search.input" placeholder="请输入搜索内容" class="input-with-select">
                        <template #prepend>
                            <el-select v-model="search.select" style="width: 105px">
                                <el-option label="UID" value="UID" />
                                <el-option label="用户名" value="username" />
                                <el-option label="手机号" value="phone" />
                                <el-option label="企业名称" value="firmname" />
                            </el-select>
                        </template>
                        <template #append>
                            <el-button icon="el-icon-search" />
                        </template>
                    </el-input>
                </div>
            </div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="UID" label="UID" />
                <el-table-column prop="firmname" label="企业名称" width="180" />
                <el-table-column prop="username" label="用户名" />
                <el-table-column prop="phone" label="手机号" />
                <el-table-column prop="registration" label="注册时间" />
                <el-table-column prop="logintime" label="最近登录" />
                <el-table-column prop="memberstate" label="会员状态" />
                <el-table-column fixed="right" label="操作" width="250">
                    <template #default>
                        <el-button size="small" @click="handleClick">管理</el-button>
                        <el-button color="#409EFF" type="primary" size="small">查看</el-button>
                        <el-button color="#409EFF" type="primary" size="small">修改</el-button>
                        <el-dropdown>
                            <el-button size="small">
                                ...
                            </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>日志</el-dropdown-item>
                                    <el-dropdown-item>解锁</el-dropdown-item>
                                    <el-dropdown-item>禁聊</el-dropdown-item>
                                    <el-dropdown-item>删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <div class="footer">
                <el-button type="primary">添加会员</el-button>
                <el-button type="danger">删除会员</el-button>
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-sizes="[5, 10, 15, 20]" :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper" :total="1">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>

export default {
    components: {

    },
    data() {
        return {
            sort: 0,
            currentPage4:1,
            search: {
                value1: 0,
                value3: 0,
                value4: 0,
                value5: 0,
                value6: 0,
                select: 'UID',
                input: '',
            },
            tableData: [
                {
                    UID: '647',
                    firmname: 'Tom',
                    username: 'Tom',
                    phone: '13812345678',
                    registration: '2022-11-30 18:52',
                    logintime: '',
                    memberstate: 1,
                }
            ],
            options1: [{
                value: 0,
                label: '不限身份'
            }, {
                value: 1,
                label: '企业会员'
            }, {
                value: 2,
                label: '个人会员'
            }],
            options2: [{
                value: 0,
                label: '按注册时间排序'
            }, {
                value: 1,
                label: '按登录时间排序'
            }],
            options3: [{
                value: 0,
                label: '不限注册时间'
            }, {
                value: 1,
                label: '3天内'
            }, {
                value: 2,
                label: '7天内'
            }, {
                value: 3,
                label: '15天内'
            }, {
                value: 4,
                label: '30天内'
            }],
            options4: [{
                value: 0,
                label: '不限注册来源'
            }, {
                value: 1,
                label: 'APP'
            }, {
                value: 2,
                label: '手机浏览器'
            }, {
                value: 3,
                label: '微信浏览器'
            }, {
                value: 4,
                label: '微信小程序'
            }, {
                value: 5,
                label: '抖音小程序'
            }, {
                value: 6,
                label: '电脑浏览器'
            }],
            options5: [{
                value: 0,
                label: '不限微信绑定'
            }, {
                value: 1,
                label: '已绑定微信'
            }, {
                value: 2,
                label: '未绑定微信'
            }],
            options6: [{
                value: 0,
                label: '不限邮箱绑定'
            }, {
                value: 1,
                label: '已绑定邮箱'
            }, {
                value: 2,
                label: '未绑定邮箱'
            }]


        }
    },
    mounted() {

    },
    methods: {
        handleClick() {
            console.log('click')
        },
        handleSizeChange(val) {
            console.log(`${val} items per page`)
        },
        handleCurrentChange(val) {
            console.log(`current page: ${val}`)
        }
    }
}
</script>

<style scoped lang="less">
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search {
    height: 50px;

    .el-select {
        float: left;
        width: 145px;
        margin-right: 2px;
    }

    .input {
        float: right;
    }
}

.el-table {}

.footer {
    margin-top: 15px;

    .el-pagination {
        float: right;
    }
}
.alert{
    margin: 20px;
    line-height: 200%;
}
</style>
